<template>
  <div>
    <h1>props-ToDos</h1>
    <ComponentDemo :id="id" :name="name" :disabled="disabled" />
  </div>
</template>

<script>
import event from "./event.js";
import ComponentDemo from "./ComponentDemo";
export default {
  components: {
    ComponentDemo
  },
  data() {
    return {
      id: "1",
      name: "jack"
    };
  },
  methods: {
    addTitleHandler() {
      alert("触发自定义事件");
    }
  },
  mounted() {
    console.log("父组件-TODOS");

    //绑定event 自定义事件
    //1 为什么要用函数名称  因为容易解绑  避免内存泄漏
    event.$on("onAddTitle", this.addTitleHandler);
  },
  beforeDestroy() {
    //及时销毁
    event.$off("onAddTitle", this.addTitleHandler);
  }
};
</script>